<template>
    <aside class="sidebar"
        :class="{ 'sidebar--collapsed': collapsed, 'sidebar--mouse-enter': collapsed && menuMouseEnter }">
        <div class="sidebar__content">
            <Menu ref="menuRef" @menu-select="handleMenuSelect" :applicationInfo="applicationInfo" />
        </div>
    </aside>

</template>

<script setup>
// 在import部分添加
import { ref, watch, onMounted, onBeforeUnmount } from 'vue'
import Menu from './Menu.vue'
import { getApplicationInfo } from '@/service/funcMenuService'
import { useRoute } from 'vue-router'
import throttle from '@/utils/throttle' // 引入throttle函数

const route = useRoute()

const props = defineProps({
    // 是否收起
    collapsed: {
        type: Boolean,
        default: false
    },
    // 菜单是否鼠标进入
    menuMouseEnter: {
        type: Boolean,
        default: false
    }
})
const applicationInfo = ref({
    ChildGroup: []
})



getApplicationInfo().then(res => {
    if (res && res.ChildGroup) {
        res.ChildGroup.forEach(group => {
            group.expanded = true
        })
    }
    applicationInfo.value = res

})


const menuRef = ref(null)

// 原始的关闭Popover函数
const closePopovers = () => {

    if (menuRef.value && menuRef.value.closeAllPopovers) {
        menuRef.value.closeAllPopovers()
    }
}

// 使用throttle包装handleScroll函数，限制200ms内只执行一次
const handleScroll = throttle(closePopovers, 200)

onMounted(() => {
    const sidebarContent = document.querySelector('.sidebar__content')
    if (sidebarContent) {
        sidebarContent.addEventListener('scroll', handleScroll)
    }
})

// 移除滚动事件监听
onBeforeUnmount(() => {
    const sidebarContent = document.querySelector('.sidebar__content')
    if (sidebarContent) {
        sidebarContent.removeEventListener('scroll', handleScroll)
    }
})

const emit = defineEmits(['menu-select'])
const handleMenuSelect = (menuItem) => {
    emit('menu-select', menuItem)
}

</script>
<style lang="scss">
.sidebar__content::-webkit-scrollbar {
    color: transparent;
    height: 3px;
    width: 0px;
    transition: width 0.3s ease;
}

.sidebar__content:hover::-webkit-scrollbar {
    width: 3px;
}

.sidebar__content::-webkit-scrollbar-thumb {
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 2px rgba(144, 147, 153, 0.3);
    background-color: #DBDBDB;
}

.sidebar__content::-webkit-scrollbar-track {
    border-radius: 5px;
    background-color: #fff;
}
</style>

<style scoped lang="scss">
.sidebar {
    height: calc(100% - 16px);
    margin: 8px 0px 8px 8px;
    width: 240px;
    border-right: 1px solid #e5e5e5;

    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid #FFF;
    background: var(--theme-menu-gradient);
    z-index: 999;
    /* 添加性能优化 */
    will-change: width;
    backface-visibility: hidden;
}

.sidebar__content {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    width: 236px;
    transform: translateZ(0);
}


.sidebar--collapsed {
    width: 0px;
    margin-left: 0;
    transform: translateX(-100%);
}

.sidebar--mouse-enter {
    width: 240px;
    position: absolute;
    margin-left: 8px;
    transform: translateX(0);
}
</style>